<template>
  <div class="container">
    <!-- 轮播图 -->
    <swiper
      v-if="broadcast && broadcast.length"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      circular
      previous-margin="10px"
      next-margin="10px"
      class="swiper-corner"
    >
      <swiper-item
        v-for="(item,index) in broadcast"
        :key="index"
        class="swiper-corner-item"
      >
        <view class="swiper-item">
          <image
            :src="item.thumb"
            mode="aspectFill"
          />
          <div :class="item.class">
            {{item.title}}
          </div>
        </view>
      </swiper-item>
    </swiper>
    <!-- 菜单 -->
    <div v-if="navigation">
      <van-grid
        :column-num="navigation.columns"
        :border="false"
      >
        <van-grid-item
          v-for="(item, index) in navigation.menus"
          :key="index"
          :icon="item.icon"
          :text="item.title"
          @click="pushNativelink(item.mplink)"
        />
      </van-grid>
    </div>
    <recommend
      v-if="list.length"
      key="recommend"
      :list="list"
    />
  </div>
</template>

<script>
import SwiperBanner from '@/components/swiperBanner'
import Recommend from '@/components/home/recommend'
import { getHomeApi, getRecommendsApi } from '@/api'
import { getShareData } from '@/utils/share'
export default {
  components: {
    SwiperBanner,
    Recommend
  },
  data () {
    return {
      navigation: null,
      menus: [],
      list: [],
      broadcast: [],
      indicatorDots: true,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500
    }
  },
  onShow () {
    this.onLoadData()
  },
  methods: {
    onLoadData () {
      console.log('test')
      console.log(this.value)
      getHomeApi().then(res => {
        const {broadcast, navigation} = res
        this.broadcast = broadcast
        this.navigation = navigation
      })

      getRecommendsApi().then(res => {
        const {items} = res
        if (items) {
          this.list = items
        }
      })
    }
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      return null
    }
    return getShareData('app')
  },
  onShareTimeline (res) {
    if (res.from === 'button') {
      return null
    }
    return getShareData('timeline')
  }
}
</script>

<style lang="less">
// .scroll-body {
//   height: 100vh;
//   margin-top: -10px;
// }
.swiper-corner {
  height: 120px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #ee732f;
}
</style>
